接續昨天的範例，我們透過下拉式選單來改變vue中的資料，視圖就會跟著連動改變，這部分是透過Javascript原生的事件去觸發函數來執行，也是在網頁中常見的動作，今天我們來看看這樣的動作在vue裡面的寫法。

<div id="app">
    <p>
        <select v-on:change="changeValue($event, 'type')">
            <option value="Frontend">Frontend</option>
            <option value="Backend">Backend</option>
        </select>
    </p>
    <p>
        <select v-on:change="changeValue($event, 'name')">
            <option value="Vue">Vue</option>
            <option value="React">React</option>
            <option value="Angular">Angular</option>
            <option value="Laravel">Laravel</option>
            <option value="CakePHP">CakePHP</option>
            <option value="Django">Django</option>
        </select>
    </p>
    <p>Type: {{ framework.type }}</p>
    <p>Framework: {{ framework.name }}</p>
</div>

<script>
const { reactive } = Vue;
const app = {
    setup(){
        const framework = reactive({
            type: "Frontend",
            name: "Vue",
        })
        function changeValue(evt, id) {
            framework[id] = evt.currentTarget.value;
        }
        return {framework, changeValue};
    }
}
const myVue = Vue.createApp(app).mount("#app");
</script>

其實跟原生的Javascript做法差異並不大，不同的是在HTML元素中事件綁定是利用v-on:change，同樣在觸發的函數中可以帶參數進入，第一個參數是DOM Event，前面需要加上一個$帶入，第二個參數是方便函數去處理欲更換的數值，而在vue的實體裡面除了return前一篇文章就有的framework物件外，也把我們新增的函數changeValue一併傳出來，否則頁面上將無法使用。

另外v-on:也可以使用@來當作他的縮寫，可以把上面的HTML部分，改為以下的寫法。

<select @change="changeValue($event, 'type')">
<select @change="changeValue($event, 'name')">

下一篇文章會繼續來介紹在Vue Event裡面可以添加的修飾符，請大家繼續關注！